<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Conduit</title>
</head>
<link rel="stylesheet" href="style/sign.css">
<body>
    <div class="box">
        <div class="header">
            <a href="./index.html"><div class="header-left">conduit</div></a>
            <div class="header-right">
                <span><a href="./index.html">Home</a></span>
                <span><a href="./signIn.html">Sign in</a></span>
                <span><a href="./signUp.html" style="color: rgba(0, 0, 0, 0.8);">Sign up</a></span>
            </div>
        </div>
    </div>
<div style="width: 100%; height: 100px;">

</div>
<div class="div2">
    <h1>Sign up</h1>
    <a href="./signIn.html"><h5>Have an account? </h5></a>
    <form action="/register.do" method="post" class="form1" id="signUp">
        <input class="input1" type="text" name="username" placeholder="Username" onblur="checkUsername()" id="username">
        <span class="thetip" id="usernameTip"></span>
        <br>
        <input class="input1" type="email" name="email" placeholder="Email" onblur="checkEmail()" id="email">
        <span class="thetip" id="emailTip"></span>
        <br>
        <input class="input2" type="password" name="pwd" placeholder="Password">
        <br>
        <input type="submit" value="Sign in"
        style="color:white;background-color:#5cb85c;border: none;width: 100px;height: 50px;font-size: 18px;border-radius: 3px;">
    </form>
</div>

<script src="js/ajax.js"></script>
<script>
    function checkUsername(){
        let username = document.querySelector('#username');
        myAjax('get','/checkUsername.do','username='+username.value,showUsernameTip);
    }
    function checkEmail(){
        let email = document.querySelector('#email');
        myAjax('get','/checkEmail.do','email='+email.value,showEmailTip);
    }
    function showUsernameTip(){
        let usernameTip=document.querySelector('#usernameTip');
        usernameTip.innerText=xhr.responseText;
        if(xhr.responseText == '用户名已存在！'){
            usernameTip.style.color='red';
        }else{
            usernameTip.style.color='green';
        }
        
    }
    function showEmailTip(){
        let emailTip=document.querySelector('#emailTip');
        emailTip.innerText=xhr.responseText;
        if(xhr.responseText == '邮箱已存在！'){
            emailTip.style.color='red';
        }else{
            emailTip.style.color='green';
        }
    }
</script>
</body>
</html>
